<template>
  <div>
    <div class="form-window" style="margin-bottom: 20px">
      <div class="form-window-line"></div>
      <div class="form-window-txt" style="display: flex; align-items: center">
        <div>被保人信息</div>
        <div v-if="!edit" style="margin-left: 50px; display: flex; cursor: pointer; align-items: center"
          @click="clickCheck">
          <img src="../../../assets/img/check.png" v-if="checked" style="width: 24px; height: 24px" alt="" />
          <img src="../../../assets/img/nocheck.png" v-else style="width: 24px; height: 24px" alt="" />

          <div style="margin-left: 10px; font-weight: 400; font-size:18px">
            默认同投保人
          </div>
        </div>
      </div>
      <!-- <div class="form-window-btn">
                <el-button :disabled="edit" size="mini" @click="history()" type="text">历史信息
                </el-button>
            </div> -->
    </div>
    <div class="form-form" v-if="!checked && showTestFeatures">
      <el-form label-position="left" label-width="140px" size="small">
        <el-form-item label="营业执照" v-if="showTestFeatures && insured.type == 1">
          <div class="form-uplopad-box">
            <upload :img_url="insured.license" file_name="insure/license" @change="upInsure($event, -1)"
              @changeKey="upLicenseKey"></upload>

            <div class="form-uplopad-box-txt">示例</div>
            <img src="@/assets/img/yyzz.png" class="form-uplopad-box-img" />
            <div class="form-uplopad-box-no" v-if="edit"></div>
          </div>
        </el-form-item>
        <el-form-item label="被保人类型">
          <el-button :disabled="edit" size="small" @click="clickTabs(index)" :class="item.isActive ? 'com-btn' : ''"
            v-for="(item, index) in tabs" :key="'djf' + index">{{ item.name }}
          </el-button>
        </el-form-item>
        <el-form-item label="被保人">
          <div>
            <el-input :disabled="edit" v-model="insured.name" placeholder="请输入" class="form-input"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="证件类型">
          <div>
            <el-input v-model="cardType" placeholder="请输入" class="form-input" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="证件号码">
          <div>
            <el-input :disabled="edit" v-model="insured.card_no" placeholder="请输入" class="form-input"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="手机号码" v-if="showTestFeatures && bx_id != 15">
          <div>
            <el-input :disabled="edit" v-model="insured.contact_mobile" placeholder="请输入" class="form-input"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="所属省市区" v-if="showTestFeatures">
          <div>
            <el-cascader :disabled="edit" :options="optionsHyAddress" @change="changeAddress" :props="propsHyAddress"
              class="form-input" :placeholder="text ? text : '请选择'"></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="详细地址" v-if="showTestFeatures && bx_id != 15">
          <div>
            <el-input :disabled="edit" v-model="insured.address" placeholder="请输入" class="form-input"></el-input>
          </div>
        </el-form-item>
        <!-- <el-form-item label="邮箱">
                    <div>
                        <el-input :disabled="edit" v-model="insured.email" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item> -->
      </el-form>
      <div class="form-btn-box">
        <el-button size="small" @click="updateInfoItem(8)">修改</el-button>
        <el-button size="small" class="com-btn" @click="saveStorage(8)">保存 </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import upload from "@/components/upload/sm-upload.vue";
export default {
  components: {
    upload
  },
  props: {
    edit: { type: Boolean, default: false },
    insured: {},
    optionsHyAddress: {},
    propsHyAddress: {},
  },
  data() {
    return {
      checked: true,
      tabs: [
        {
          name: "企业",
          isActive: false,
        },
        {
          name: "个人",
          isActive: false,
        },
      ],

      optionsAddress: [],
      propsAddress: {
        emitPath: true,
        lazy: true,
        value: "label",
        lazyLoad: (node, resolve) => {
          if (node.level == 0) {
            this.getAddress();
          }
          if (node.level == 1) {
            this.getCity(node, resolve);
          } else if (node.level == 2) {
            node.level = 2;
            this.getArea(node, resolve);
          }
        },
      },
      bx_id: ''
    };
  },
  computed: {
    type: function () {
      return this.insured.type;
    },
    text: function () {
      if (this.insured.province) {
        return this.insured.province + "/" + this.insured.city + "/" + this.insured.area;
      }
      return "";
    },
    cardType: function () {
      if (this.insured.type == 1) {
        return "统一信用代码";
      } else {
        return "身份证";
      }
    },
  },
  watch: {
    type: {
      handler(newVal) {
        if (newVal == 1) {
          this.tabs[0].isActive = true;
          this.tabs[1].isActive = false;
        } else {
          this.tabs[1].isActive = true;
          this.tabs[0].isActive = false;
        }
        //   console.log('newVla' + newVal + 'oldVal' + oldVal)
      },
      immediate: true,
    },
  },
  mounted() {
    this.bx_id = this.$route.params.id;
  },
  methods: {
    upLicenseKey(e) {
      if (this.showTestFeatures) {
        this.$emit('upLicenseKey', e)
      }

    },
    upInsure(e, index) {
      if (this.showTestFeatures) {
        this.$emit('upInsure', e, index, '被保');
      }

    },
    //保存
    saveStorage(index) {
      this.$emit("saveStorage", index);
    },
    //修改
    updateInfoItem(index) {
      this.$emit("updateInfoItem", index);
    },
    clickTabs(index) {
      for (let i in this.insured) {
        this.insured[i] = ''
      }
      this.tabs.forEach((item, i) => {
        if (i == index) {
          item.isActive = true;
        } else {
          item.isActive = false;
        }
      });
      if (index == 0) {
        this.insured.type = 1;
      } else {
        this.insured.type = 2;
      }
    },
    changeAddress(e) {
      this.insured.province = e[0];
      this.insured.city = e[1];
      this.insured.area = e[2];

      // this.$emit('update:insure.province', e[0])
      console.log(e);
    },
    //勾选同被保人
    clickCheck() {
      this.checked = !this.checked;
      if (this.showTestFeatures && !this.edit) {
        this.$emit("clickCheck", this.checked);
      }

      // if (this.checked && !this.edit) {
      //   this.$emit("clickCheck",this.checked);
      // }
    },
  },
};
</script>
<style scoped>
@import "../../../assets/css/index/form.css";
</style>
